<template>
  <div>
    <ul class="img-list">
      <li v-for="(url, index) in fileList" :key="index" style="position: relative" :style="{
        width: props.width + 'px',
        height: props.height + 'px'
      }">
        <div>
          <el-image 
          :zoom-rate="1.2"
           :max-scale="7" 
           :min-scale="0.2" 
           :preview-teleported="true"
           :preview-src-list="[url]"
            :src="url" 
            lazy 
            />
          <span class="img-del-x">
            <el-icon @click="handleRemove(index)">
              <CloseBold />
            </el-icon>
          </span>
        </div>
      </li>
      <li v-if="props.limit - fileList.length > 0" :style="{
        width: props.width + 'px',
        height: props.height + 'px'
      }">
        <div @click="handleOpen" class="avatar-uploader-icon">
          <Plus />
        </div>
      </li>
    </ul>
    <KoiDialog ref="koiDialogRef" title="附件管理" footer-hidden :width="props.dialogWidth" :height="props.dialogHeight">
      <template #content>
        <ColeAttachmentDialog :can-uploaded-num="props.limit - fileList.length" :can-selected-limit="props.limit"
          :type="props.type" :already-selected="fileList.length" @handle-submit="handleSubmit"></ColeAttachmentDialog>
      </template>
    </KoiDialog>
  </div>
</template>

<script setup lang="ts" name="ColeAttachmentList">
import { ref, watch } from "vue";
import ColeAttachmentDialog from "./components/ColeAttachmentDialog.vue";

const koiDialogRef = ref(null);
const emits = defineEmits(["update:fileList"]);

interface IAttachmentProps {
  fileList?: any; //文件数组对象 [url1,url2] 或者字符串
  type?: any; //图片image / 视频 video
  width?: number; //图片宽度
  height?: number; //图片高度
  dialogWidth?: number; //弹窗宽度
  dialogHeight?: number; //弹窗高度
  limit?: number; //限制上传多少
}

// 子组件接收父组件的值
// withDefaults：设置默认值  defineProps：接收父组件的参数
const props = withDefaults(defineProps<IAttachmentProps>(), {
  fileList: [],
  dialogWidth: 1400,
  dialogHeight: 700,
  type: "image",
  width: 120,
  height: 120,
  limit: 5
});
const fileList = ref(props.fileList);
console.log(`limit`,props.limit)
watch(
  () => [props.fileList],
  () => {
    // 父组件传递回显数据
    fileList.value = props.fileList;
  }
);

const handleSubmit = (files: any) => {
  koiDialogRef.value && (koiDialogRef.value as any).koiClose();
  fileList.value = fileList.value.concat(files.map((r: any) => r.url));
  emits("update:fileList", fileList.value);
};
const handleOpen = () => {
  koiDialogRef.value && (koiDialogRef.value as any).koiOpen();
};

const handleRemove = (index: any) => {
  fileList.value.splice(index, 1);
  emits("update:fileList", fileList);
};
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  width: 100%;
  height: 100%;
  color: #8c939d;
  text-align: center;
  border: 2px dashed var(--el-color-primary);
  border-radius: 5px;
}

.img-list {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.img-list li {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
}

.img-list img {
  border-radius: 5px;
}

.img-del-x {
  position: absolute;
  z-index: 100;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: hsla(0, 0%, 60%, 0.6);
  border-radius: 10px;
}
</style>
